@import "./color";
.btn{
  overflow: hidden;
  position: relative;
  font-size: 14px;
  border-width: 1px;
  border-style: solid;
  outline: none;
  cursor: pointer;
  padding: 8px 20px;
  border-radius: 4px;
  transition: .3s;
  display: inline-block;
  &.btn-round{
    border-radius: 20px;
    padding: 12px 23px;
  }
  &.btn-md{
    padding: 10px 23px;
    font-size: 15px;
  }
}
@mixin generateBtn($list){
  @each $m in $list{
    $type:nth($m, 1);
    $border:nth($m, 2);
    $background:nth($m, 3);
    $color:nth($m, 4);
    .btn-#{$type}{
      border-color:  lighten($border, 4%);
      background-color:  lighten($background, 10%);
      color: $color;
      &:hover{
        border-color: $border;
        background-color: $background;
      }
      &.disabled:hover{
        border-color:  lighten($border, 4%);
        background-color:  lighten($background, 10%);
      }
    }
  }
}
//btn 样式
@include generateBtn(
  $list:
      (default $c-border $c-light-border $c-text)
      (red $c-red $c-red $c-white)
      (blue $c-blue $c-blue $c-white)
      (green $c-green $c-green $c-white)
);

.disabled{
  cursor: not-allowed;
}
